<template>
  <div class="echarts-view" ref="echartsView">
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'EchartsView',
  mixins: [],
  components: {},
  props: {
    option: {
      type: Object,
      required: true,
    },
  },
  data () {
    return {
      myChart:null
    }
  },
  computed: {},
  watch: {
    option: {
      deep: true,
      handler(val) {
        if (this.myChart) {
          this.$nextTick(() => {
            this.setData();
          });
        }
      },
    }
  },
  created () {},
  mounted() {
    this.initEcharts();
    window.onresize = function() {
        this.myChart && this.myChart.resize();
    };
  },
  methods: {
    initEcharts() {
      let chartDom = this.$refs.echartsView;
      this.myChart  = echarts.init(chartDom);
      this.setData();
    },
    setData(){
      this.option && this.myChart.setOption(this.option);
    }
  },
}
</script>
<style lang="scss" scoped>
.echarts-view{
  width: 100%;
  height: 100%;
  position: relative;
}
</style>
